<%@page import="java.sql.Timestamp"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="com.wanmait.movies.vo.User"%>
<%@page import="sun.swing.UIAction"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>个人信息</title>
	<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
    	/*
    		修改个人信息页面实现的功能
    			1.点击修改头像可以上传新头像文件，并且实时预览本地照片
    			2.修改电话和邮箱，可以空着不填
    			   填的话必须按照正则表达式的格式规范填写，否则无法提交表单
    			3.date类型的input填写生日，后台把String转换成TimeStamps   
    	*/
    
    	$(function () {
    		$("#myform").submit(function () {
				if (checkUserphoneFormat() && checkUserEmailFormat()) {
					return true;
				}
				return false;
			});
    		$("#userphone").blur(checkUserphoneFormat);
    		$("#useremil").blur(checkUserEmailFormat);
			$("#image_text").click(function () {
				$("#file_input").click();
				$("#file_input").on("change",function(){
					var objUrl = getObjectURL(this.files[0]) ;
					 console.log("objUrl = "+objUrl) ;
					$("#newimage").attr("src", objUrl);
				});
			});
		});
    	function checkUserphoneFormat(){
    		var zz = /^1\d{10}$/; 
    		if ($("#userphone").val() == "" || zz.test($("#userphone").val())) {
    			$("#phonelab").css("color","green");
				$("#phonelab").html("√");
				return true;
			}else{
				$("#phonelab").css("color","red");
    			$("#phonelab").html("请输入正确的的手机号");
				return false;
			}
    	}
    	function checkUserEmailFormat(){
    		var zz = /^[\w\.]*@\w*\.com$/; 
    		if ($("#useremil").val() == "" || zz.test($("#useremil").val())) {
    			$("#emaillab").css("color","green");
				$("#emaillab").html("√");
				return true;
			}else{
				$("#emaillab").css("color","red");
    			$("#emaillab").html("请输入正确的的邮箱");
				return false;
			}
    	}
		//上传图片预览
		function getObjectURL(file) {
		  var url = null ;
		  if (window.createObjectURL!=undefined) 
		  { // basic
		   url = window.createObjectURL(file) ;
		  }
		  else if (window.URL!=undefined) 
		  {
		   // mozilla(firefox)
		   url = window.URL.createObjectURL(file) ;
		  } 
		  else if (window.webkitURL!=undefined) {
		   // webkit or chrome
		   url = window.webkitURL.createObjectURL(file) ;
		  }
		  return url ;
		 }
    </script>
    <style type="text/css">
        body{
            background-color: #f5f5f5;
        }
        #panel{
            width: 850px;
            height: 550px;
            margin: 50px auto;
            background: white;
            padding: 50px;
            border-radius: 5px; 
            box-shadow:  0px 0px 5px rgba(0,0,0,0.1);
        }
        #panel #profile_photo{
            float: left;
            width: 200px;
            height: 100%;
            text-align: center; 
        }
        #panel #profile_photo img{
             
            width: 200px;
            height: 200px;
            border-radius: 10px; 
        }
        #panel #person_infomation{
            margin-top: 50px; 
            width: 550px;
             
            float: left;
            padding: 50px;
        }
        #panel .input_box{
            height: 100px;
            border-bottom: 1px solid #f5f5f5;
            text-align: left;
            line-height: 100px;
            
        } 
        #panel #name{
            font-size: 25;
            font-weight: 600;
            border-bottom: 1px solid #f5f5f5;
        }
        #panel .input_box input{
            width: 250px;
            height: 40px;
        }
        #panel .input_box #submit{
            border-radius: 50px;
            border: 2px #ddd solid; 
            background: none;
            margin-left: 100px;
        }
        #panel #file_input{
            opacity: 0;
        }
        #panel #backtoindex{
            margin-left: 750px;
        }
    </style>
</head>
<body>
	
	<jsp:include page="/include/head.jsp"></jsp:include>
	<% User ui = (User)session.getAttribute("ui");
		if(ui.getUserMail()==null){
			ui.setUserMail("");
		}
		if(ui.getUserPhone()==null){
			ui.setUserPhone("");
		}
	
	%>
	<div id="panel">
       <a href="<%=request.getContextPath() %>/IndexServlet?action=begin" id="backtoindex">&laquo;回到首页</a>
       <form action="/movies/UserServlet?action=rewritePersonInfo" method="post" enctype="multipart/form-data" id="myform">
           <div id="profile_photo">
               <img id="newimage" src="<%=request.getContextPath() %>/images/<%=ui.getUserFaceimage()%>">
               <br>
               <br>
               <input type="file" id="file_input" multiple="multiple" name="movieImage">
               <a href="javascript:" id="image_text">修改我的图像</a>
           </div>
           <div id="person_infomation">
               <div id="name">
                   	 <%=ui.getUserName() %>
               </div>
               
               <div class="input_box">
                   &emsp;&emsp;&emsp;电&emsp;话&emsp;<input type="text" id="userphone" name="userphone" value="<%=ui.getUserPhone()%>">
                   <label id="phonelab"></label>
               </div>
               
               <div class="input_box">
                   &emsp;&emsp;&emsp;邮&emsp;箱&emsp;<input type="text" id="useremil" name="useremil" value="<%=ui.getUserMail()%>">
                   <label id="emaillab"></label>
               </div>
               
               <div class="input_box">
                   &emsp;&emsp;&emsp;生&emsp;日&emsp;<input type="date" id="userbirthday" name="userbirthday"value="<%=
                   new SimpleDateFormat("yyyy-MM-dd").format(ui.getUserBirthday())%>">
                   <label id="birthlab"></label>
               </div>
               <div class="input_box">
                   &emsp;<input type="submit" id="submit" name="submit" value="保存">
               </div>
                
               
                
           </div>
       </form>
       
   </div>
</body>
</html>